<template>
  <div class="my-order-warpper">
    <tab  :scroll-threshold='6' :line-width="2" bar-active-color="#ff4444">
      <tab-item v-for="(item,index) in tabItem" :selected="index === idx" :key="item"  @on-item-click="filterOrder(index)">{{item}}</tab-item>
    </tab>
    <div class="box-detail" v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="busy"
                infinite-scroll-distance="10">
                          
      <div class="order-group" v-if="orderList.length>0" v-for="(item,index) in orderList" :key="index">
        <div slot="header">
          <cell :title="'订单编号：'+item.tradeNo">
            <span v-if="item.indentStatus==0">待付款</span>
            <span v-if="item.indentStatus==1&&item.transportStatus==1">待发货</span>
            <span v-if="item.indentStatus==1&&item.transportStatus==2">已发货</span>
            <span v-if="item.indentStatus==1&&item.indentStatus==2">退款审核中</span>
            <span v-if="item.indentStatus==3">退款成功</span>
            <span v-if="item.indentStatus==4">退款失败</span>
          </cell>
        </div>
        <div slot="content">
          <div class="product-box" v-for="(goods,index) in item.details" :key="index">
            <img :src="goods.productImg" alt="" class="left">
            <div class="middle">
              <div class="name-box">{{goods.productName}}</div>
              <div class="section-line">{{goods.productLabels}}</div>
              <div class="price-box">￥{{goods.price | formatPrice}}</div>
              <div class="deliver" v-if="item.indentStatus!=0&&item.transportStatus==2">
                快递单号：<span class="tex-de">{{item.transportNo}}</span>
              </div>
            </div>
            <div class="right">
              <span>×1</span>
            </div>
          </div>
        </div>
        <div slot="footer" class="foot">
          <div class="total-price-box">
            <span class="price">合计: ￥{{item.totalPrices | formatPrice}}</span>
            <x-button type="Delete" v-if="item.indentStatus==0" mini  @click.native="godelect(item)">取消订单</x-button>
            <x-button type="primary" v-if="item.indentStatus==0" mini @click.native="gopay(item)">立即支付</x-button>
            <x-button type="primary" v-if="item.indentStatus==1&&listQuery.param.isFinish!='1'&&item.collageStatus!=2" mini @click.native="returnMoney(item)">申请退款</x-button>
            <x-button type="primary" class="detai-pin"  mini v-if="item.collageStatus==2">拼团中</x-button>
            <x-button type="primary" v-if="item.indentStatus==1&&item.transportStatus==2" mini @click.native="sureShop(item)">确认收货</x-button>
            <x-button type="primary" v-if="listQuery.param.isFinish=='0'" mini @click.native="goComment(item)">评价</x-button>
          </div>
        </div>
      </div>
      <load-more :tip="loadingText" :show-loading="loading"></load-more>
    
    </div>
  </div>
</template>

<script>
  import {Cell,Group,CellBox,Card,XButton,Tab,TabItem,LoadMore} from "vux";
 import { mapState,mapGetters } from "vuex";
  
  export default {
    components: {
      Cell,Group,CellBox,Card,XButton,Tab,TabItem,LoadMore
    },
    data() {
      return {
        loadingText:"正在加载",
        loading:true,
        busy:false,
        tabItem: [ "待付款", "待收货", "待评价",'待拼团','退换货', "已完成"],
        listQuery: {
          pageNumber: 0,
          pageSize: 10,
          param: {
            userId: '',
            indentStatus: '0',  //0为未付款,1,已付款
          }
        },
        or:'',
        orderList: [],
        idx:0
      };
    },
    filters:{
      formatPrice(val){
        return val.toFixed(2)
      },
      filterLabels(val){
        let str
        if(val){
          str = val.substring(1,val.length-2)
        }
        return str
      }
    },
    created() {
   
    },
    mounted() {
      this.listQuery.param.userId = this.$route.query.userId
      
    },
    methods: {  
      goComment(item){  //去评价
        this.$router.push({ path:'/Evalute', query: { id:item.details[0].id,indentType:item.indentType }})
      },
      sureShop(item){  //确认收货  device/indentinfo/comfired
         var data={
           indentId:item.details[0].indentId,
           shopId:item.details[0].indentId,
         }
          this.$axios.post('/device/indentinfo/comfired',data).then(res=>{
          if(res.data.code==1000){
            console.log(res)
            
            for(let i=0;i<this.orderList.length;i++){
               if(this.orderList[i].tradeNo==item.tradeNo){
                this.orderList.splice(i,1)
                this.$vux.toast.text("成功")
               }
            }
          }
        })   
         
      },
      returnMoney(item){   // 申请退款 /device/retreat/applyRefund
         
    
           var data={
              orderNo:item.tradeNo,
              refundReason:'',
           }
         var self=this
         this.$vux.confirm.prompt('请输入退款原因', {
                inputAttrs: {
                    type: 'text'
                },
                title: '退款原因',
                onCancel (value) {
                    // console.log(value)
                   
                },
                onConfirm (value) {
                   data.refundReason=value
                   console.log(data)
                    self.$axios.post('/device/refund/applicationRefundMax',data).then(res=>{
                    console.log(res)
                    if(res.data.code==1000){
                      console.log(res)
                      
                      for(let i=0;i<self.orderList.length;i++){
                        if(self.orderList[i].tradeNo==item.tradeNo){
                          self.orderList.splice(i,1)
                          self.$vux.toast.text("成功")
                        }
                      }
                    }else if(res.data.code==1017){
                        for(let i=0;i<self.orderList.length;i++){
                        if(self.orderList[i].tradeNo==item.tradeNo){
                          self.orderList.splice(i,1)
                          self.$vux.toast.text("退款失败")
                        }
                      }
                    }else if(res.data.code==1016){
                       for(let i=0;i<self.orderList.length;i++){
                        if(self.orderList[i].tradeNo==item.tradeNo){
                          self.orderList.splice(i,1)
                          self.$vux.toast.text('退款正在审核中')
                        }
                      }
                    }
                  }) 
                },
         })
        

      },
      //取消订单  device/indentinfo/deleteOrder
      godelect(item){
         console.log(item)
          this.$axios.post('/device/indentinfo/deleteOrder',{orderNo:item.tradeNo}).then(res=>{
          if(res.data.code==1000){
            console.log(res)
            this.$vux.toast.text("已取消")
            for(let i=0;i<this.orderList.length;i++){
               if(this.orderList[i].tradeNo==item.tradeNo){
                this.orderList.splice(i,1)
               }
            }
          }
        })
      },
      loadMore(){
        this.busy =true;
        this.listQuery.pageNumber++;
         this.fetchData()
        
      },
      fetchData(index){
       console.log(this.listQuery)
       var self=this
        this.$axios.post('/device/indentinfo/lists',this.listQuery).then(res=>{
          if(res.data.code==1000){
            console.log(res)
            if(index!=undefined){
               this.orderList=[]
            }
            this.orderList = this.orderList.concat(res.data.data)
             if(res.data.data.length<10){
                self.loadingText="没有数据啦·～～·"    
                self.loading=false        
                self.busy = true;
               }else{  
                self.busy = false
            }
          }
        })  
      },
      // getBarWidth: function(index) {
      //   index = index || 0;
      //   let text = this.tabItem[index];
      //   return text.length * 32 + "px";
      // },
      filterOrder(index) {
        switch (index) {
          case 0:
            console.log("待付款");
            this.listQuery.param.indentStatus='0'
            this.listQuery.param.transportStatus=''
            this.idx=index
            this.listQuery.param.statuT=""
            this.listQuery.param.isFinish=''
            this.listQuery.pageNumber=1;
            this.orderList=[]
            this.fetchData(index)
            break;
          case 1:
            console.log("待收货");
            this.listQuery.param.indentStatus='1'
            this.listQuery.param.collageStatus=""
            this.listQuery.param.transportStatus=''
            this.listQuery.param.statuT="1"
            this.listQuery.param.isFinish=''
            this.idx=index
            this.listQuery.pageNumber=1;
            this.orderList=[]
            this.fetchData(index)
            break;
          case 2:
            console.log("待评价");
            this.listQuery.param.collageStatus=""
            this.listQuery.param.transportStatus=''
            this.listQuery.param.indentStatus=''
            this.listQuery.param.isFinish='0'
            this.listQuery.param.statuT=""
            this.idx=index
            this.listQuery.pageNumber=1;
            this.fetchData(index)
            break;
          case 3:
            console.log("待拼团");
            this.listQuery.param.transportStatus=''
            this.listQuery.param.indentStatus=''
            this.listQuery.param.isFinish=''
            this.listQuery.param.statuT=""
            this.listQuery.param.collageStatus="2"
            this.idx=index
             this.listQuery.pageNumber=1;
            this.fetchData(index)
            break;
          case 4:
            console.log("退换货");
            this.listQuery.param.transportStatus=''
            this.listQuery.param.indentStatus='2'
            this.listQuery.param.isFinish=''
            this.listQuery.param.statuT=""
            this.idx=index
             this.listQuery.pageNumber=1;
            this.fetchData(index)
            break;
          case 5:
            console.log("已完成");
            this.listQuery.param.transportStatus=''
            this.listQuery.param.indentStatus=''
            this.listQuery.param.isFinish='1'
            this.listQuery.param.statuT=""
            this.idx=index
             this.listQuery.pageNumber=1;
            this.idx=index
             this.fetchData(index)
            break;
          default:;
        }
      },
      gopay(item) {
        let data = {
          totalPrice: item.totalPrices,
          userId:this.$route.query.userId,
          orderNo:item.tradeNo,
        }
         console.log(data)
        this.$axios.post('/device/waitPayOne/',data).then(res=>{
          this.jsApiParameters=res.data.finalpackage
          // this.jsApiParameters=res.data.parameters
          this.callpay()
        })
      },
      callpay() {
        if(typeof WeixinJSBridge == "undefined"){
          if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
          }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
              document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
          }
        }else{
          this.jsApiCall();
        }
      },
      jsApiCall() {
        let _this=this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          this.jsApiParameters,
          function(res){
              WeixinJSBridge.log(res.err_msg);
              // this.$router.push({ path:'/Mypersonal'})
              if(res.err_msg == "get_brand_wcpay_request:ok"){
                //alert(res.err_code+res.err_desc+res.err_msg);
                // window.location.href="http://www.baidu.com"
                _this.$router.push({path:'/paySuccess'})
              }else{
                  //返回跳转到订单详情页面
                  alert(支付失败);   
              }
          }
        );
      },
    }
  };
</script>
<style>
  body .my-order-warpper .total-price-box .detai-pin{
    color: #fff;
  }
</style>
<style lang="less" scoped>
.foot{
  border-bottom: 1px solid #dbdbdb;
}
    .box-detail{
      position: absolute;
      top:0;
      left:0;
          overflow: auto;
      padding-top:80px;;
      bottom:0;
      z-index: 1;
      right:0;
    }
  .my-order-warpper {
    background: #f3f5f9;
    width: 100%;
    text-align: left;
    min-height: 100%;
    position: relative;
    .weui-panel{
        margin-bottom: 20px !important;
    }
    .weui-cells{
        background:#f3f5f9 !important;
        overflow:auto;
    }
    .weui-cells{
        margin-top: 0 !important;
    }
    .weui-cells:after{
        border-bottom:none !important;
    }
    .product-box {
      display: flex;
      position: relative;
          margin-left: 0.28rem;
       margin-top: 0.18rem;
      height: 172px;
      border-bottom: 0.5rem/37.5 solid #dbdbdb;
      .left {
        position: absolute;
        left:12px;
        top: 0;
        width: 144px;
        height: 126px;
        flex-grow: 0;
        margin-top:6px;
      }
      .middle {
        flex-grow: 1;
        margin-left: 180px;
        .name-box {
          font-size: 26px;
          color: #444444;
          display: -webkit-box;
          line-height: 1.2;
         -webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
        }
        .section-line {
          margin-top: 2px;
          font-size: 24px;
              color: #a2a2a2;
        }
        .deliver{
          font-size: 24px;
          color: #333333;
          margin-top: 4px;
        }
        .price-box {
          font-size: 24px;
          color: #333333;
          margin-top: 4px;
        }
      }
      .right {
        flex-grow: 0;
        min-width: 50px;
        span {
          font-size: 26px;
          display: block;
          line-height: 1;
          height: 26px;
        }
        display: flex;
        align-items: center;
        font-size: 26px;
        flex-grow: 0;
        width:50px;
      }
    }
    .total-price-box {
      height: 86px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 30px 0 50px;
      span {
        line-height: 86px;
        width: 308px;
        font-size:30px;
        color: #ff4444;
      }
    }
    .weui-btn+.weui-btn {
      margin-top: 0;
      margin-left: 4px;
    }
    .weui-btn_mini {
      height: 48px;
      width: 146px;
          background: #c1c1c1;
      font-size:26px;
      padding: 0;
      margin: 0;
      line-height: 50px;
      border-radius: 4px;
    }
    .weui-btn_default {
      color: #999999;
      border: 1px solid #999999;
    }
    .weui-btn_primary {
      background-color: #ff5050;
      color: #444444;
    }
  }

  .order-group{
    background: #fff;
        margin-top: 10px;
    .weui-cell{
        align-items:center;
        border-bottom:1px solid #dbdbdb;
        height:70px;
        .vux-label{
            font-size:26px;
            color: #222;
        }
        .weui-cell__ft{
            font-size:28px;
            color: #ff5050;
        }
    }
  }
</style>

<style>
.my-order-warpper .weui-cell{
  font-size: 26px;
  text-align: left;
}
body .my-order-warpper .vux-tab .vux-tab-item{
  height:80px;
  line-height: 80px;
}
  .my-order-warpper .scrollable .vux-tab-ink-bar {
    bottom: 0;
  }

  .my-order-warpper .scrollable {
    padding-bottom: 0;
  }

  .my-order-warpper .vux-tab .vux-tab-item.vux-tab-selected {
    color: #F70968;
  }

  .my-order-warpper .vux-tab,
  .my-order-warpper .vux-tab-warp {
    height: 80px;
    padding-top: 0;
       background: #545454;
  }

  .my-order-warpper .vux-tab-container {
    height: 80px;
    z-index: 10;
  }

  .my-order-warpper .vux-tab .vux-tab-item {
    line-height: 80px !important;
    border-bottom: 0.5rem/37.5 solid #dbdbdb !important;
    background: white;
  }

  .vux-tab-warp .vux-tab-bar-inner {
    border-radius: 2px;
  }
  .my-order-warpper .vux-tab .vux-tab-item{
        color: #333333;
    }
</style>
